<template>

  <div>

    <!--搜索框部分-->
    <el-card>

      <el-alert
        title="推荐"
        type="success"
        :closable="false"
        description="强烈建议，家庭成员应该只包含子女、夫妻之间。不包含其他人员信息，家庭成员的数据非常重要，不建议加入父母、兄弟姐妹等成员信息。家庭以最小单元为基础。">
      </el-alert>

    </el-card>

    <el-card style="margin-top: 10px">

      <el-button style="margin-bottom: 10px" type="warning" size="mini" @click="openSaveMemberFamily">新增</el-button>


      <!--无数据则显示这些-->
      <!--<div v-if="memberFamilyTable.memberFamilyData === undefined || memberFamilyTable.memberFamilyData == null || memberFamilyTable.memberFamilyData.length <= 0">-->



      <!--</div>-->

        <el-table
          :data="memberFamilyTable.memberFamilyData"
          max-height="600px"
          height="600px"
          style="width: 100%">

          <!--为空时候的-->
          <template slot="empty">
            <el-row>
              <el-col :span="24">
                <div style="display:flex; justify-content: center">
                  <img src="@/assets/images/member/family.jpg" alt=""/>
                  <!--<img src="@/assets/images/member/member.gif" alt=""/>-->
                </div>
              </el-col>

              <el-col :span="24">
                <div>&nbsp;</div>
                <div style="text-align:center; font-size: 14px">
                  <el-image style="width: 50px; height: 50px" :src="require('@/assets/images/index/flower.gif')" fit="contain"></el-image>
                  <span>家，是心灵栖息的地方，是感情的归宿,是灵魂的延续。每一个归家人的旅途，都缀满了璀璨的星河，路的尽头是温暖的港湾。</span>
                </div>
              </el-col>

            </el-row>
          </template>

          <el-table-column
            prop="ico"
            label="头像"
            width="120"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.icoPath != null">
                <el-avatar shape="square" size="small" :src="scope.row.icoPath"></el-avatar>
              </span>
              <div v-else>
                <el-avatar shape="square" size="small" :src="require('@/assets/images/avatar/avatar12.png')"></el-avatar>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="userName"
            label="姓名"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
              <span v-else>{{scope.row.userName}}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="idCard"
            label="身份证"
          >
          </el-table-column>

          <el-table-column
            prop="phone"
            label="手机号码"
          >
          </el-table-column>

          <el-table-column
            prop="dataExplain"
            label="关系"
          >
            <template slot-scope="scope">
              <el-tag size="mini">{{scope.row.dataExplain}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="call"
            label="对他的称呼"
          >
          </el-table-column>

          <el-table-column
            prop="birthdayTips"
            label="是否开启生日提醒"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.birthdayTips === 2"> 开启 </span>
              <span v-else>未开启</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="beforeBirthday"
            label="生日提前多久提醒"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button @click="toOpenMemberFamilyDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
              <el-button @click="openUpdMemberFamily(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
              <el-button @click="delMemberFamilyByIdTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
            </template>
          </el-table-column>

        </el-table>



    </el-card>

    <MemberFamilySaveUpd ref="memberFamilySaveUpdRef" @saveUpdMemberFamilyCallback="saveUpdMemberFamilyCallback"></MemberFamilySaveUpd>
    <MemberFamilyDetailed ref="memberFamilyDetailedRef" ></MemberFamilyDetailed>

  </div>

</template>

<script>

  import http from '@/utils/http'
  import MemberFamilySaveUpd from './MemberFamilySaveUpd.vue'
  import MemberFamilyDetailed from './MemberFamilyDetailed.vue'

  export default {
    name: "MemberFamilyAll",
    components: {
      MemberFamilySaveUpd,
      MemberFamilyDetailed,
    },
    data(){
      return {
        // 表格
        memberFamilyTable: {
          // 表格数据
          memberFamilyData: [],
        },
      }
    },
    methods: {
      /**
       * 跳转到家庭成员的详情页面
       */
      toOpenMemberFamilyDetailed(row){
        this.$refs.memberFamilyDetailedRef.openMemberFamilyDetailed(row)
      },
      /**
       * 删除前的提示信息
       */
      delMemberFamilyByIdTips(row){
        this.$confirm('是否删除该家庭成员, 家庭成员数据非常重要，删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delMemberFamilyById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据成员主键删除成员信息
       */
      delMemberFamilyById(row){
        http.post("/user/delMemberFamilyById", {
          id: row.id,
          joinId: row.joinId,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getMemberFamilyAll()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开新增家庭成员弹出框
       */
      openSaveMemberFamily(){
        let currentUser = this.getCurrentUser()
        this.$refs.memberFamilySaveUpdRef.openMemberFamilyPage('save', null, currentUser)
      },
      /**
       * 打开-修改家庭成员弹出框
       * @param row
       */
      openUpdMemberFamily(row){
        let currentUser = this.getCurrentUser()
        this.$refs.memberFamilySaveUpdRef.openMemberFamilyPage('upd', row, currentUser)
      },
      /**
       * 获取当前用户
       * @return {{call: string, currentLoginUserName: null, nickname: null, userName: string, connectionType: number}}
       */
      getCurrentUser(){
        let localStorage = window.localStorage;
        let memberFamily = JSON.parse(localStorage.memberFamily);
        if (memberFamily){
          return {
            // 家庭用户的源头都是登录用户，这里为空，后台直接获取登录用户
            id: null,
            // 真实姓名
            userName: memberFamily.userName,
            // 外号，昵称
            nickname: memberFamily.nickname,
            // 我对他的称呼
            call: '-',
            // 当前登陆用户
            currentLoginUserName: memberFamily.userName,
            // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
            connectionType: 1,
          }
        } else {
          return {
            // 真实姓名
            userName: '-',
            // 外号，昵称
            nickname: null,
            // 我对他的称呼
            call: '-',
            // 当前登陆用户
            currentLoginUserName: '-',
            // 获取连接类型的使用哪一种，现在有三种，1，只获取家庭成员2，获取社交关系，3，1+2全部获取
            connectionType: 1,
          }
        }
      },
      /**
       * 保存修改之后的回调函数
       */
      saveUpdMemberFamilyCallback(){
        this.getMemberFamilyAll()
      },
      /**
       * 获取当前用户的家庭成员
       */
      getMemberFamilyAll(){
        http.get("/user/getMemberFamilyAll", {
          excluding: false,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 处理数据
          this.memberFamilyTable.memberFamilyData = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getMemberFamilyAll()
    },
  }
</script>

<style scoped>

</style>
